<script setup>
// 安保出勤
import * as echarts from 'echarts'
import { onMounted } from 'vue'
// import { setupChartAnimation } from '@/utils/animation'

onMounted(() => {
  const myChart = echarts.init(document.querySelector('.powerEcharta'))

  let data = {
    value: 807,
    name: 'kw-h'
  }
  const option = {
    title: {
      text: '{key| 耗电}\n\n{num|' + data.value + '}',
      subtext: data.name,
      x: '49%',
      y: '31%',
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontWeight: 'bold',
            color: '#26f7ff',
            fontFamily: '微软雅黑',
            fontSize: 32
          },
          key: {
            fontWeight: 'bold',
            color: '#26f7ff',
            fontFamily: '微软雅黑',
            fontSize: 16
          }
        }

      },
      subtextStyle: {
        lineHeight: 5,
        fontSize: 16,
        color: '#26f7ff'
      }
    },
    data: [{
      name: data.value.name
    }],
    series: [{ // 主圆环
      name: data.value.name,
      type: 'pie',
      radius: ['60%', '90%'],
      startAngle: 225,
      color: [{
        type: 'linear',
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
          offset: 0,
          color: 'rgba(44, 232, 173,1)' // 0% 处的颜色
        }, {
          offset: 0.5,
          color: 'rgba(44, 232, 173,.5)' // 0% 处的颜色
        }, {
          offset: 1,
          color: 'rgba(34, 129, 239,1)' // 100% 处的颜色
        }]
      }, 'transparent'],
      hoverAnimation: true,
      legendHoverLink: false,
      z: 10,
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [{
        value: 75 * data.value / 100
      }, {
        value: 500 - (75 * data.value / 500)
      }]
    }, { // 背景圆环
      name: '',
      type: 'pie',
      radius: ['60%', '90%'],
      silent: true,
      startAngle: 225,
      labelLine: {
        normal: {
          show: false
        }
      },
      z: 5,
      data: [{
        value: 75,
        itemStyle: {
          color: '#1A3B4C'
        }
      }, {
        value: 25,
        itemStyle: {
          color: 'transparent'
        }
      }]
    }, { // 中间圈
      name: '',
      z: 5,
      type: 'pie',
      cursor: 'default',
      radius: ['55%', '55%'],
      startAngle: 160,
      endAngle: -30,
      hoverAnimation: false,
      legendHoverLink: false,
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [{
        value: 75,
        itemStyle: {
          borderColor: 'rgba(48, 164, 231,1)',
          borderType: 'dashed'
        }
      }, {
        value: 25,
        itemStyle: {
          color: 'transparent'
        }
      }]
    }]
  }

  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<template>
  <div></div>
</template>

<style scoped></style>